import { useEffect, useState } from "react";

const BaseURL = "https://geek.itheima.net/v1_0/channels";

// 使用useEffect异步请求数据
// useEffect是用来在页面渲染时处理操作的hook函数
const useEffectDemo = () => {
  const [list, setList] = useState<{ id: number; name: string }[]>([]);
  const [count, setcount] = useState(0);
  //   异步请求数据，需要在useEffect中处理
  useEffect(() => {
    console.log("useEffect异步请求数据");
    // 进行网络请求
    const getList = async () => {
      const res = await fetch(BaseURL);
      const list = await res.json();
      console.log(list);
      setList(list.data.channels);
    };
    // 调用异步函数
    getList();

    // 组件卸载时,会执行return下的异步操作
    return () => {};
    // 如果这里没有【】,则会在每次渲染时都调用useEffect，如果【】里有依赖项，在依赖项变化时则会触发一些useEffect
    // [count],则每次count变化触发useEffect()
  }, []);

  // HTML
  return (
    <>
      <button onClick={() => setcount(count + 1)}>按钮{count}</button>
      <ul
        style={{
          listStyle: "none",
          display: "flex",
          width: "800px",
          flexWrap: "wrap",
        }}
      >
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
};

export default useEffectDemo;
